<?php
use yii\bootstrap\ActiveForm;
?>
<link rel="stylesheet" href="../static/dist/css/AdminLTE.min.css" type="text/css">
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/datatables/jquery.dataTables.css" type="text/css">
<link rel="stylesheet" href="../static/css/admin.css" type="text/css">
<link rel="stylesheet" href="../static/jBox/Skins/Metro/jbox.css" type="text/css">
<style>

    .dataTable>tbody>tr>td {
        vertical-align: middle;
        font-size: 0.8em;
        padding: 8px 18px;
    }
    .dataTable>thead>tr>th {
        vertical-align: middle;
        font-size: 0.8em;
    }

    .examine-content .input-group .form-control{
        margin-bottom: 20px;
        height: 30px ;
        line-height: 30px;
    }
    .examine-content button{
        margin: 10px;
    }
    #table_id_example th, td {
        white-space: nowrap;
    }
</style>
<div class="tabs-panel">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    产品名称: <input class="depart-input" id="productName" style="width: 160px" type="text">&nbsp;
                    <button type="button" class="btn btn-primary depart-modal" id="select_button" style="width: 80px;">查询</button>&nbsp;
                    <button type="button" class="btn btn-warning depart-modal" id="reset_button" style="width: 80px;">重置</button>
                </div>
                <div class="box-body">
                    <a type="button" class="btn btn-success depart-modal" href="javascript:showAdd()" style="width: 80px;">添加</a>
                    <table id="table_id_example" class="display">
                        <thead>
                        <tr>
                            <th style="width: 15%">ID</th>
                            <th style="width: 20%">产品编号</th>
                            <th style="width: 20%">产品名称</th>
                            <th style="width: 15%">分类</th>
                            <th style="width: 15%">排序</th>
                            <th style="width: 15%">状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add-product-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 450px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        保存产品
                    </h4>
                </div>
                <div class="modal-body">
                    <form action="/develop/add-product" method="post" id="product_form">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="mobile"><span class="text-danger">* </span>产品编号</label>
                                <input type="text" class="form-control" name="product_code" id="product_code" placeholder="产品编号">
                            </div>
                            <div class="form-group">
                                <label for="mobile"><span class="text-danger">* </span>产品名称</label>
                                <input type="text" class="form-control" name="product_name" id="product_name" placeholder="产品名称">
                            </div>
                            <div class="form-group">
                                <label for="mobile"><span class="text-danger">* </span>产品分类</label>
                                <select class="form-control" id="product_category" name="product_category">
                                    <option value="">选择分类</option>
                                    <?php foreach($category as $value) { ?>
                                        <option value="<?= $value['AutoId']?>"><?= $value['name']?></option>
                                    <?php }?>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="mobile">排序</label>
                                <input type="text" class="form-control" name="product_sort" id="product_sort" placeholder="排序">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">状态</label>
                                <select name="product_useflg" id="product_useflg" class="form-control">
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                            <input type="hidden" name="id" id="id">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <a type="button" class="btn btn-primary ajax_add_product">提交</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<!-- 固定js -->
<script type="text/javascript" src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../static/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="../static/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript" src="/static/plugins/treeTable/jquery.treetable.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="/static/app/global.js?version=<?=Yii::$app->params['version']?>"></script>
<script>
    var dateTable = null;
    $(function () {
        dateTable = $('#table_id_example').DataTable({
            dom: '<"top">rt<"bottom"flip><"clear">',
            language: {
                "sUrl": '../static/plugins/datatables/language.json'
            },
            "searching": false,
            "processing": true,
            "serverSide": true,
            "scrollCollapse": true,
            "scrollX": true,
            ajax: {
                url: '/develop/product-list',
                type: 'post',
                data: function (d) {
                    d.productName = $('#productName').val();
                },
                error: getError
            },
            aoColumns: [
                {"data": "AutoId", "bSortable": false},
                {"data": "code", "bSortable": false},
                {"data": "name", "bSortable": false},
                {"data": "categoryName", "bSortable": false},
                {"data": "sort", "bSortable": false},
                {"data": "useflg", "bSortable": false},
            ],
            columnDefs: [
                {
                    "targets": [0],
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full) {
                        return '<a href="javascript:showAdd(' + data + ')">' + data + '</a>';
                    }
                },
                {
                    "targets": [-1],
                    "orderable": false,
                    "searchable": false,
                    "render": function (data, type, full) {
                        if (data == 1) {
                            return '启用';
                        }
                        return '禁用';
                    }
                }
            ]
        });

        //查询
        $('#select_button').on('click', function () {
            dateTable.ajax.reload();
        });
        //重置
        $("#reset_button").on('click', function () {
            $('#productName').val('');
            dateTable.ajax.reload();
        });

        //保存事件
        $('.ajax_add_product').on('click', function () {

            if ($('#product_code').val() == '') {
                $.jBox.error('请输入产品编号', '错误');
                return;
            }
            if ($('#product_name').val() == '') {
                $.jBox.error('请输入产品名称', '错误');
                return;
            }
            if ($('#product_category').val() == '') {
                $.jBox.error('青选择产品分类', '错误');
                return;
            }
            var sort = $('#product_sort').val();
            if (sort != '' && !$.isNumeric(sort)) {
                $.jBox.error('请输入正确的排序值', '错误');
                return false;
            }

            $.post('/develop/add-product',
                {
                    id: $('#id').val(),
                    product_code: $('#product_code').val(),
                    product_name: $('#product_name').val(),
                    product_category: $('#product_category').val(),
                    product_sort: $('#product_sort').val(),
                    product_useflg: $('#product_useflg').val(),
                },
                function (data) {
                    if (data.code == 200) {
                        $('#add-product-modal').modal('hide');
                        $.jBox.tip('操作成功', 'success');
                        dateTable.draw(false);
                    } else {
                        $.jBox.error(data.val, '错误');
                    }
                },
                'json'
            );
        })
    });

    function showAdd(id) {
        $('#id').val('');
        $('#product_code').val('');
        $('#product_name').val('');
        $('#product_category').val('');
        $('#product_sort').val('0');
        $('#product_useflg').val('1');
        if (id) {
            $.post('/develop/product-dtl', {id: id},
                function (data) {
                    if (data.code == 200) {
                        $('#product_code').val(data['data']['code']);
                        $('#product_name').val(data['data']['name']);
                        $('#product_category').val(data['data']['developProductCategoryId']);
                        $('#product_sort').val(data['data']['useflg']);
                        $('#product_useflg').val(data['data']['useflg']);
                        $('#id').val(data['data']['AutoId']);
                        $('#add-product-modal').modal('show');
                    } else {
                        $.jBox.error(data.val, '错误');
                    }
                },
                'json'
            );
        } else {
            $('#add-product-modal').modal('show');
        }
    }

</script>